<template>
    <FrontendPageWrapper>
        <!-- 新增大气的顶部区域 -->
        <div class="bg-gradient-to-b from-indigo-700 to-blue-900">
            <div class="container mx-auto max-w-screen-xl px-4 py-20">
                <div class="max-w-3xl mx-auto text-center">
                    <h1 class="text-4xl md:text-5xl font-bold mb-6">
                        <span v-html="dynamicText" class="text-gray-800 dark:text-white"></span>
                        <span v-if="showInfinite" class="text-blue-600 dark:text-blue-200 block">无限可能</span>
                    </h1>
                    <p class="text-lg mb-8 text-gray-700 dark:text-gray-200 font-medium">在这里，我分享关于 Java、Spring Boot、Docker、Kubernetes 和云原生技术的深度实践、教程和解决方案。无论您是初学者还是经验丰富的开发者，都能找到有价值的内容。</p>
                    <div class="flex flex-wrap justify-center gap-4">
                        <button @click="scrollToArticles" class="px-6 py-3 bg-indigo-600 text-white font-medium rounded-lg hover:bg-indigo-700 transition-colors">
                            浏览最新文章
                            <svg class="w-4 h-4 ml-2 inline-block" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                            </svg>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <div class="container mx-auto max-w-screen-xl mt-5 px-4 py-6">
            <div class="grid grid-cols-4 gap-6">
                <!-- 左边栏 -->
                <div class="col-span-4 px-3 md:col-span-3 sm:col-span-4">
                    <!-- 文章列表 -->
                    <div class="flex justify-between items-center mb-6">
                        <h1 id="latest-articles" class="text-2xl font-bold text-gray-900">
                            最新文章
                        </h1>
                    
                    </div>
                    
                    <div class="space-y-6">
                        <div v-for="(article, index) in articles" :key="index"
                            class="bg-white rounded-lg overflow-hidden border border-gray-100 hover:shadow-md transition-shadow duration-300">
                            <div class="flex flex-col md:flex-row">
                                <div class="md:w-1/4 h-48 md:h-auto overflow-hidden">
                                    <a @click="openArticlePreview(article)" class="cursor-pointer">
                                        <img class="w-full h-full object-cover transition-transform duration-300 hover:scale-105" 
                                            :src="article.cover || article.titleImage || article.title_image" 
                                            alt="文章封面" 
                                            @error="$event.target.src='https://via.placeholder.com/800x400?text=暂无封面'" />
                                    </a>
                                </div>
                                <div class="md:w-3/4 p-5 flex flex-col justify-between">
                                    <div>
                                        <!-- 标签 -->
                                        <div class="mb-2 flex flex-wrap gap-2">
                                            <span @click="goTagArticleListPage(item.id, item.name)" 
                                                v-for="(item, index) in article.tags || []" :key="index"
                                                class="inline-block text-xs font-medium px-2.5 py-1 rounded-full cursor-pointer"
                                                :class="[
                                                    index % 6 === 0 ? 'bg-purple-100 text-purple-700' : 
                                                    index % 6 === 1 ? 'bg-blue-100 text-blue-700' : 
                                                    index % 6 === 2 ? 'bg-green-100 text-green-700' : 
                                                    index % 6 === 3 ? 'bg-yellow-100 text-yellow-700' : 
                                                    index % 6 === 4 ? 'bg-red-100 text-red-700' : 
                                                    'bg-indigo-100 text-indigo-700'
                                                ]">
                                                {{ item.name }}
                                            </span>
                                        </div>
                                        
                                        <a @click="openArticlePreview(article)" class="cursor-pointer">
                                            <h2 class="mb-2 text-xl font-bold tracking-tight text-gray-800 hover:text-indigo-600 transition-colors">
                                                {{ article.title }}
                                            </h2>
                                        </a>
                                        <p class="mb-3 text-gray-500 line-clamp-2">{{ article.description }}</p>
                                    </div>
                                    
                                    <div class="flex justify-between items-center mt-3">
                                        <!-- meta 信息 -->
                                        <div class="flex items-center gap-4 text-sm text-gray-500">
                                            <div class="flex items-center">
                                                <svg class="w-4 h-4 mr-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                </svg>
                                                {{ article.createTime }}
                                            </div>
                                            
                                            <div v-if="article.readNum && article.readNum > 0" class="flex items-center">
                                                <svg class="w-4 h-4 mr-1 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                        d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z">
                                                    </path>
                                                </svg>
                                                {{ article.readNum }} 次阅读
                                            </div>
                                        </div>
                                        
                                        <!-- 查看全文按钮 -->
                                        <button @click="goArticleDetail(article.id)" 
                                            class="group inline-flex items-center px-4 py-2 text-sm font-medium text-indigo-600 rounded-lg border border-transparent hover:bg-indigo-600 hover:text-white transition-colors">
                                            阅读全文
                                            <svg class="w-3.5 h-3.5 ml-2 group-hover:translate-x-1 transition-transform duration-200" 
                                                aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 10">
                                                <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 5h12m0 0L9 1m4 4L9 9"/>
                                            </svg>
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 分页 -->
                    <nav aria-label="Page navigation example" v-if="total > 0">
                        <ul class="flex items-center justify-center mt-10 mb-10 -space-x-px h-10 text-base">
                            <li>
                                <a v-if="current > 1" @click="getArticles(current - 1)"
                                    class="flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-500 bg-white border border-gray-300 rounded-l-lg hover:bg-indigo-50 hover:text-indigo-600 transition-colors dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                                    <span class="sr-only">Previous</span>
                                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 6 10">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="M5 1 1 5l4 4" />
                                    </svg>
                                </a>
                                <a v-else @click="getArticles(current)"
                                    class="cursor-not-allowed flex items-center justify-center px-4 h-10 ml-0 leading-tight text-gray-400 bg-white border border-gray-300 rounded-l-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-500">
                                    <span class="sr-only">Previous</span>
                                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 6 10">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="M5 1 1 5l4 4" />
                                    </svg>
                                </a>
                            </li>
                            <li v-for="page in pages" :key="page">
                                <a @click="getArticles(page)"
                                    class="flex items-center border-gray-300 justify-center px-4 h-10 leading-tight bg-white border dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white"
                                    :class="[page == current ? 'text-indigo-600 bg-indigo-50 hover:bg-indigo-100 hover:text-indigo-700' : 'text-gray-500 hover:bg-indigo-50 hover:text-indigo-600']">

                                    {{ page }}
                                </a>
                            </li>
                            <li>
                                <a v-if="current < pages" @click="getArticles(current + 1)"
                                    class="flex items-center justify-center px-4 h-10 leading-tight text-gray-500 bg-white border border-gray-300 rounded-r-lg hover:bg-indigo-50 hover:text-indigo-600 transition-colors dark:bg-gray-800 dark:border-gray-700 dark:text-gray-400 dark:hover:bg-gray-700 dark:hover:text-white">
                                    <span class="sr-only">Next</span>
                                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 6 10">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="m1 9 4-4-4-4" />
                                    </svg>
                                </a>
                                <a v-else @click="getArticles(current)"
                                    class="cursor-not-allowed flex items-center justify-center px-4 h-10 leading-tight text-gray-400 bg-white border border-gray-300 rounded-r-lg dark:bg-gray-800 dark:border-gray-700 dark:text-gray-500">
                                    <span class="sr-only">Next</span>
                                    <svg class="w-3 h-3" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none"
                                        viewBox="0 0 6 10">
                                        <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                            stroke-width="2" d="m1 9 4-4-4-4" />
                                    </svg>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </div>
                <!-- 右边栏 -->
                <div class="col-span-4 px-3 md:col-span-1 sm:col-span-4">
                    <div class="sticky top-21 space-y-6">
                        <UserInfoCard></UserInfoCard>

                        <!-- 文章分类 -->
                        <div
                            class="w-full font-medium p-5 bg-white bg-opacity-90 border border-indigo-50 rounded-lg shadow-md border-t-4 border-yellow-500 dark:bg-gray-800 dark:bg-opacity-90 dark:border-gray-700">
                            <h2 class="mb-4 font-bold text-indigo-700 uppercase dark:text-white">分类</h2>
                            <div>
                                <a @click="goCatagoryArticleListPage(item.id, item.name)" v-for="(item, index) in categories"
                                    :key="index"
                                    class="inline-block bg-yellow-50 text-yellow-600 text-xs font-medium mr-2 mb-2 px-2.5 py-1 rounded hover:bg-yellow-100 transition-colors duration-200 dark:hover:bg-yellow-800 dark:hover:text-yellow-300 dark:bg-yellow-900 dark:text-yellow-300">
                                    {{ item.name }}
                                </a>
                            </div>
                        </div>

                        <!-- 文章标签 -->
                        <div
                            class="w-full font-medium p-5 bg-white bg-opacity-90 border border-indigo-50 rounded-lg shadow-md border-t-4 border-indigo-500 dark:bg-gray-800 dark:bg-opacity-90 dark:border-gray-700">
                            <h2 class="mb-4 font-bold text-indigo-700 uppercase dark:text-white">标签</h2>
                            <div @click="goTagArticleListPage(item.id, item.name)" v-for="(item, index) in tags" :key="index"
                                class="inline-block bg-indigo-50 text-indigo-600 text-xs font-medium mr-2 mb-2 px-2.5 py-1 rounded hover:bg-indigo-100 transition-colors duration-200 dark:hover:bg-indigo-800 dark:hover:text-indigo-300 dark:bg-indigo-900 dark:text-indigo-300">
                                {{ item.name }}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </FrontendPageWrapper>
</template>

<script setup>
import FrontendPageWrapper from '@/components/FrontendPageWrapper.vue'
import UserInfoCard from '@/components/UserInfoCard.vue'
import { useRouter } from 'vue-router'
import { ref, onMounted } from 'vue'
import { getIndexArticleList } from '@/api/frontend/index'
import { getCategories } from '@/api/frontend/category'
import { getTags } from '@/api/frontend/tag'

const router = useRouter()

const goArticleDetail = (articleId) => {
    console.log('跳转详情页' + articleId)
    router.push({ path: '/article/detail', query: { articleId: articleId } })
}

// 文章列表数据
const articles = ref([])
const current = ref(1)
const size = ref(6)
const total = ref(0)
const pages = ref(0)

// 分类列表数据
const categories = ref([])

// 标签列表数据
const tags = ref([])

const dynamicText = ref('');
const showInfinite = ref(false);
const fullText = 'Mindsparkle--探索技术的';

const typeText = () => {
    let index = 0;
    const interval = setInterval(() => {
        if (index < fullText.length) {
            dynamicText.value += fullText[index];
            index++;
        } else {
            clearInterval(interval);
            showInfinite.value = true; // 显示"无限可能"
        }
    }, 150); // 每个字母显示的间隔时间
};

// 获取文章列表
const getArticles = async (page = 1) => {
    try {
        const res = await getIndexArticleList({
            current: page,
            size: size.value
        })
        if (res.success) {
            articles.value = res.data.records
            total.value = res.data.total
            current.value = res.data.current
            pages.value = res.data.pages
        }
    } catch (error) {
        console.error('获取文章列表失败:', error)
    }
}

// 页面加载时获取数据
onMounted(() => {
    getArticles()
    
    // 获取分类
    getCategories().then((res) => {
        console.log('获取分类数据', res)
        if (res.success) {
            categories.value = res.data
        }
    })
    
    // 获取标签
    getTags().then((res) => {
        console.log('获取标签数据', res)
        if (res.success) {
            tags.value = res.data
        }
    })

    typeText();
})

// 分页变化时重新获取数据
const handleCurrentChange = (page) => {
    getArticles(page)
}

const goCatagoryArticleListPage = (id, name) => {
    console.log('跳转到分类文章列表页面，分类ID:', id, '分类名称:', name)
    router.push({ path: '/category/list', query: { id: id, name: name } })
}

const goTagArticleListPage = (id, name) => {
    console.log('跳转到标签文章列表页面，标签ID:', id, '标签名称:', name)
    router.push({ path: '/tag/list', query: { id: id, name: name } })
}

const openArticlePreview = (article) => {
    // Implementation of openArticlePreview function
}

// 滚动到最新文章部分
const scrollToArticles = () => {
    document.getElementById('latest-articles').scrollIntoView({ 
        behavior: 'smooth' 
    });
}

</script>

<style>
.container {
    max-width: 1230px;
}

.article-img {
    height: 100%;
}

.two-line-clamp {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

.el-menu--horizontal .el-menu-item:not(.is-disabled):focus,
.el-menu--horizontal .el-menu-item:not(.is-disabled):hover {
    outline: 0;
    color: var(--el-menu-text-color);
    ;
    background-color: #fff;
    border-bottom: 2px solid #409eff;
    ;
}

.category-item:hover {
    text-decoration: underline;
    cursor: pointer;
}

.tag-item:hover {
    cursor: pointer;
}

.el-tag:hover {
    background-color: var(--el-color-info-light-8);
}

.cursor-pointer {
    cursor: pointer;
}

/* 添加闪烁动画 */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.animate-blink {
    animation: blink 1s infinite;
}
</style>